<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
	<h1>1-面板组件</h1>
	<pre>
		1. 创建一个 div 添加 class="panel-group" 做为做外层容器
		2. 创建一个 div 添加 class="panel panel-default" 用作panel样式
		3. 创建一个 div 添加 class="panel-heading" 用作 panel的头部
		4. 创建一个&lt;h1&gt; class="panel-title" 作为panel头部的标题
		5. 创建一个 a 链接 data-toggle="collapse" data-parent="#panel-group的id" href="#panel内容的id
		6. 创建一个 div 添加 class="panel-collapse collapse in 作为panel文本的父div容器
		7. 创建一个 div 添加 class="panel-body"
	</pre>
	<!-- panel 组元素 -->
	<div class="panel-group" id="accordion">
		<!-- 第一个 panel -->
		<div class="panel panel-default">
			<!-- panel 标题 -->
			<div class="panel-heading">
				<h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" 
			          href="#collapseOne">
			          点击我进行展开，再次点击我进行折叠。第 1 部分
			        </a>
	      		</h4>
			</div>
			<!-- panel 内容 -->
			<div id="collapseOne" class="panel-collapse collapse in">
				<div class="panel-body">
					<!--Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
					nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.-->
					<iframe src="./a.html"></iframe>
				</div>
			</div>
		</div>
		
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
	        <a data-toggle="collapse" data-parent="#accordion" 
	          href="#collapseTwo">
	          点击我进行展开，再次点击我进行折叠。第 2 部分
	        </a>
	      </h4>
			</div>
			<div id="collapseTwo" class="panel-collapse collapse">
				<div class="panel-body">
					Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
				</div>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
	        <a data-toggle="collapse" data-parent="#accordion" 
	          href="#collapseThree">
	          点击我进行展开，再次点击我进行折叠。第 3 部分
	        </a>
	      </h4>
			</div>
			<div id="collapseThree" class="panel-collapse collapse">
				<div class="panel-body">
					Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
				</div>
			</div>
		</div>
	</div>
	
	<h2>1.2-一个简单的折叠面板</h2>
	<div class="panel-group" id="panelGroup">
		<div class="panel panel-default">
			<div class="panel-heading">
				<button id="btnFold" class="btn btn-primary" data-toggle="collapse" data-parent="#panelGroup" href="#panelBody" >
					折叠标签按钮
				</button>
			</div>
			
			<div class="panel-body" class="collapse in" id="panelBody">
				1231312321312323123123213121313213213
			</div>
		</div>
	</div>
	
	<script>
		$(function(){
			
			// 第一个默认是展开的,在这里隐藏
			$('#collapseOne').collapse('hide');
			// 张开第三个
			$('#collapseThree').collapse('show');
			
			
			
			//一些方法
			//激活内容为可折叠元素。接受一个可选的 options 对象。
//			$('#identifier').collapse({
//			   toggle: true
//			})
			
			//切换显示/隐藏可折叠元素。
//			$('#identifier').collapse('toggle');
			
			//显示可折叠元素。 
//			$('#identifier').collapse('show');
 
			//隐藏可折叠元素。 
//			$('#identifier').collapse('hide');
 
			
			//在调用 show 方法后触发该事件。
			$("#btnFold").on('show.bs.collapse', function () {
		        alert('嘿，当您展开时会提示本警告')
		    });
			
			//当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
			$("#btnFold").on('shown.bs.collapse', function () {
		        //...
		    });
			
			//hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。 
			$("#btnFold").on('hide.bs.collapse', function () {
		        //...
		    });
		    
		    //hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 
		    $("#btnFold").on('hidden.bs.collapse', function () {
		        //...
		    });
		});
	</script>


	</body>
</html>
